<!-- 数据预览页面 -->
<template>
<!-- table主体-->
  <div style="height:calc(100% - 1px);">
    <div style="height:calc(100% - 60px);overflow:auto">
      <el-table v-if="tableData.records"
        :data="tableData.records"
        border
        width="100%">
        <el-table-column
        v-for="(item,index) in tableData.records[0]" :key="index"
          :prop="index"
          :label="item.fldShowname || index"
          width="180">
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        v-if="tableData.records"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.recordNumber">
      </el-pagination>
    </div>
</div>
</template>

<script>
  export default {
    data () {
      return {
        currentPage: 1, // 默认显示第1页面
        pageNum: 1, // 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
        pageSize: 15// 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
      }
    },
    props: {
      // 接收父组件传入的数据
      tableData: {
          type: Object,
          default: {}
        }
      },
    methods: {
      // 改变页大小
       handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        // 调用父组件查询接口
        this.$emit('getData', {pageNum: this.pageNum, pageSize: this.pageSize})
        // pageNum:1,
        // pageSize:15,
      },
      // 改变页码，调用父组件查询接口
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
        this.pageNum = val
        this.$emit('getData', {pageNum: this.pageNum, pageSize: this.pageSize})
      }
    }
  }
</script>
